<template>
  <view class="card-page">
    <u-field icon='search' label-width='0' :borderBottom="false" v-model="searchWd" placeholder="搜索加项包" trim>
      <view slot="right" class="search-btn" @click="search">搜索</view>
    </u-field>
    <view class="detail-list">
      <view class="left">
        <view class="item active">
          可选项目
          <view v-if="checkItems.length" class="mark">
            {{checkItems.length}}
          </view>
        </view>
      </view>
      <view class="right">
        <view class="item" v-for="(item,index) in showItems" :key="index">
          <!-- <radio :value="x" @click="checkRadio"/> -->
          <view class="flexR">
            <radio :checked="item.check" @click="checkRadio(item)"/>
            <view>{{item.itemName}}</view>
          </view>
          <view class="money">¥{{item.itemAmt}}</view>
        </view>
      </view>
    </view>
    <view class="pay">
      <view class="">
        <text class="money">
          ¥{{ pkg.money + checkItems.reduce((sum, e) => sum + Number(e.itemAmt || 0), 0) | fixed}}
        </text>
        <text v-if="pkg.money !== pkg.receivableMoney" class="cross">
          ¥{{ pkg.receivableMoney }}
        </text>
      </view>
      <view class="mingxi-box" @click="toMingxi">
        <image class="mingxi" src="../../../static/images/icon/mingxi.png" mode=""></image>
        <view class="">
          明细
        </view>
      </view>
      <view class="btn" @click="toConfirm">
        下一步
      </view>
    </view>
  </view>
</template>

<script>
  import {getItemLs} from '@/api/physical.js'
  export default {
    data() {
      return {
        itemList: [],
        showItems: [],
        pkg: {},
        searchWd: '',
        x: false
      }
    },
    onLoad(opt) {
      this.pkg = JSON.parse(opt.pkg)
      this.getItemLs()
    },
    computed: {
      checkItems() {
        return this.itemList.filter(item => item.check)
      },
    },
    methods: {
      getItemLs() {
        getItemLs().then(res => {
          this.showItems = this.itemList = res.filter(item => this.pkg.itemList.findIndex(ite => ite.itemCode == item.itemCode) == -1)
        })
      },
      checkRadio(item) {
        // item.check = !item.check
        this.$set(item, 'check', !item.check)
      },
      search() {
        this.showItems = this.itemList.filter(item => item.itemName.indexOf(this.searchWd) != -1)
      },
      toMingxi() {
        uni.navigateTo({
          // url: '../Mingxi/Mingxi?checkItems=' + JSON.stringify(this.checkItems),
          url: `../Mingxi/Mingxi?checkItems=${JSON.stringify(this.checkItems)}&pkg=${JSON.stringify(this.pkg)}`,
        })
      },
      toConfirm() {
        uni.navigateTo({
          url: `../ReservationConfirmation/ReservationConfirmation?checkItems=${JSON.stringify(this.checkItems)}&pkg=${JSON.stringify(this.pkg)}`,
        })
      }
    }
  }
</script>

<style lang="less" scoped>
.card-page {
  display: flex;
  flex-direction: column;
}
.u-field {
  height: 64upx;
  border-radius: 64upx;
  line-height: 64upx;
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 24upx;
  background-color: #FFF;
  .search-btn {
    width: 80upx;
    height: 42upx;
    line-height: 42upx;
    border-radius: 42upx;
    font-size: 24upx;
    text-align: center;
    background-color: #366AA4;
    color: #FFF;
  }
}
.detail-list {
  display: flex;
  flex: 1;
  border-radius: 8px;
  overflow: hidden;
  .left {
    width: 174upx;
    background-color: #F2F2F2;
    .item {
      line-height: 44upx;
      border-bottom: 1px solid rgba(0,0,0,0.12);
      padding: 24upx 0 24upx 20upx;
      background-color: #FFF;
      position: relative;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28upx;
      color: #999;
      line-height: 44upx;
      .mark {
        position: absolute;
        right: 20upx;
        top: 20upx;
        width: 24upx;
        height: 24upx;
        background: #FF9393;
        border-radius: 50%;
        text-align: center;
        line-height: 24upx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 16upx;
        color: #FFFFFF;
      }
      &.active {
        color: #366AA4;
        &:before {
          content: '';
          display: block;
          position: absolute;
          width: 6upx;
          height: 64upx;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          background: #366AA4;
        }
      }
    }
  }
  .right {
    flex: 1;
    padding: 0 32upx 96upx;
    background-color: #FFF;
    overflow: auto;
    .item {
      display: flex;
      justify-content: space-between;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28upx;
      color: rgba(0,0,0,0.5);
      line-height: 44upx;
      border-bottom: 1px solid rgba(0,0,0,0.12);
      padding: 24upx 0;
    }
  }
}
.pay {
  width: 100vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 108upx;
  padding: 0 32upx;
  box-shadow: 0px -8px 76px 22px rgba(227,237,255,0.58);
  background-color: #FFF;
  .cross {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28upx;
    color: #DADADA;
    line-height: 48upx;
    text-decoration: line-through;
    margin-left: 10upx;
  }
  .btn {
    width: 240upx;
    height: 64upx;
    background: #366AA4;
    border-radius: 64upx;
    text-align: center;
    line-height: 64upx;
    color: #FFF;
  }
}
.money {
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 32upx;
  color: #FFAA32;
  line-height: 44upx;
}
.mingxi-box {
  text-align: center;
}
.mingxi {
  width: 30upx;
  height: 30upx;
}
</style>
